<template>
  <div class="com-container">
    <div ref="paramsCompare" class="com-chart"></div>
  </div>
</template>

<script setup name="ParamsCompareCom">
import { shallowRef, onMounted, onBeforeUnmount, watch } from 'vue'
import {
  initOption,
  dataOption,
  apdaterOption
} from '../../options/statistic/ParamsCompareOption.js'
import { useChart } from '../../hooks/statistic/useChart'
import { useStatistic } from '../../hooks/statistic/useStatistic'

const { currentTeam } = useStatistic()
const { register, initChart, screenAdapter, updateChart } = useChart()
const paramsCompare = shallowRef()
let adapterFunc = null
onMounted(async () => {
  register(paramsCompare.value)
  initChart(initOption())
  adapterFunc = () => {
    screenAdapter(apdaterOption(paramsCompare.value))
  }
  window.addEventListener('resize', adapterFunc)
  screenAdapter(apdaterOption(paramsCompare.value))
  const data = await dataOption(currentTeam.value)
  updateChart(data)
  watch(currentTeam, async () => {
    const data = await dataOption(currentTeam.value)
    updateChart(data)
  })
})
onBeforeUnmount(() => {
  window.removeEventListener('resize', adapterFunc)
})
</script>

<style lang="less" scoped></style>
